<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>登录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.css" />
		<link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
		<script src="../js/plugins/axios.js"></script>
		<script src="../js/plugins/vue.js"></script>
		<script>
			//配置axios的前缀
			axios.defaults.baseURL='http://localhost:8080/'
			//把axios配置为全局变量
			Vue.prototype.$http = axios //给Vue这个类添加一个原型的属性,这个类的对象都能调用
			//屏蔽vue的警告
			Vue.config.productionTip = false
		</script>
		<script src="../element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

	</head>

	<body>
<div id="app">
		<div class="login-boxtitle">
			<a href="home.html"><img alt="logo" src="../images/logobig.png" /></a>
		</div>

		<div class="login-banner">
			<div class="login-main">
				<div class="login-banner-bg"><span></span><img src="../images/big.jpg" /></div>
				<div class="login-box">

							<h3 class="title">登录商城</h3>

							<div class="clear"></div>
						
						<div class="login-form">
						  <form>
							   <div class="user-name">
								    <label for="user"><i class="am-icon-user"></i></label>
								    <input type="text" name="" id="user" placeholder="邮箱/手机/用户名" v-model="phoneUserForm.phone">
                 </div>
							  <div class="user-phone">
								  <label for="imageCode"><i class="am-icon-check am-icon-sm"></i></label>
								  <input type="text" name="" style="width: 180px;" v-model="phoneUserForm.imageCode"
										 id="imageCode" placeholder="请输入图片验证码">
								  <img id="captcha-image-temp" @click="getImageCode" :src="imagePrefix+imageCode"
									   class="captcha-image-temp" alt="点击换图" title="点击换图"
									   style="vertical-align: middle; cursor: pointer;">
							  </div>
							  <div class="verification">
								  <label for="code"><i class="am-icon-code-fork"></i></label>
								  <input type="tel" name="" id="code" v-model="phoneUserForm.phoneCode" placeholder="请输入短信验证码">
								  <button type="button" class="btn" href="javascript:void(0);" @click="sendMobileCode"
										  id="sendMobileCode">
									  获取
								  </button>
							  </div>
              </form>
           </div>
            
            <div class="login-links">
                <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
								<a href="#" class="am-fr">忘记密码</a>
								<a href="register.html" class="zcnext am-fr am-btn-default">注册</a>
								<br />
            </div>
								<div class="am-cf">
									<input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm">
								</div>
						<div class="partner">		
								<h3>合作账号</h3>
							<div class="am-btn-group">
								<li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
								<li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span> </a></li>
								<li><a href="#"><i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span> </a></li>
							</div>
						</div>	

				</div>
			</div>
		</div>


					<div class="footer ">
						<div class="footer-hd ">
							<p>
								<a href="# ">恒望科技</a>
								<b>|</b>
								<a href="# ">商城首页</a>
								<b>|</b>
								<a href="# ">支付宝</a>
								<b>|</b>
								<a href="# ">物流</a>
							</p>
						</div>
						<div class="footer-bd ">
							<p>
								<a href="# ">关于恒望</a>
								<a href="# ">合作伙伴</a>
								<a href="# ">联系我们</a>
								<a href="# ">网站地图</a>
								<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
							</p>
						</div>
					</div>
	</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				//邮箱注册的信息
				emailUserForm:{
					email:"",
					//图片验证码
					imageEmailCode:"",
					//邮箱验证码
					emailCode: "",
					//密码
					password: "",
					passwordRepeat: "",
				},
				//手机号注册的信息
				phoneUserForm:{
					//手机号
					phone:"",
					//图片验证码
					imageCode:"",
					//手机验证码
					phoneCode: "",
					password: "",
					passwordRepeat: "",
				},
				imageCode:"",//图片验证码的路径
				imageEmailCode:"",//邮箱图片验证码的路径
				imagePrefix: "data:image/jpeg;base64,",
			},
			methods:{

				//获取图片验证码的唯一key uuid
				createUuid(){
					var s = [];
					var hexDigits = "0123456789abcdefghi";
					for (var i = 0; i < 36; i++) {
						s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
					}
					s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
					s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
					s[8] = s[13] = s[18] = s[23] = "-";

					var uuid = s.join("");
					return uuid;
				},
				//发送请求获取图片验证码
				getImageCode(){
					if(!sessionStorage.getItem("myEmageCodeKey")){
						//获取uuid
						var uuid = this.createUuid();
						sessionStorage.setItem("myEmageCodeKey",uuid);
					}
					this.$http.get("/vcode/imageCode/"+sessionStorage.getItem("myEmageCodeKey")).then(res=>{
						console.log(sessionStorage.getItem("myEmageCodeKey",uuid))
						this.imageCode = res.data.data
					})
				},
				//发送请求获取邮箱的图片验证码
				getImageEmailCode(){
					if(!sessionStorage.getItem("myEmailEmageCodeKey")){
						//获取uuid
						var uuid = this.createUuid();
						sessionStorage.setItem("myEmailEmageCodeKey",uuid);
					}
					this.$http.get("/vcode/imageEmailCode/"+sessionStorage.getItem("myEmailEmageCodeKey")).then(res=>{
						console.log(sessionStorage.getItem("myEmailEmageCodeKey",uuid))
						this.imageEmailCode = res.data.data
					})
				},
				//获取邮箱验证码
				sendMobileEmailCode(event){
					//1.判断邮箱号不为空
					if(!this.emailUserForm.email){
						this.$notify({
							title: '警告',
							message: '邮箱号不能为空',
							type: 'warning'
						});
						return;
					}
					if(this.emailUserForm.email){
						//判断邮箱是否合规
						var emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
						if(!emailReg.test(this.emailUserForm.email)) {
							alert("邮箱格式错误!");
							return false;
						}
					}

					//2.判断邮箱图片验证码不为空
					if(!this.emailUserForm.imageEmailCode){
						this.$notify({
							title: '警告',
							message: '邮箱图片验证码不能为空',
							type: 'warning'
						});
						return;
					}
					//3.获取按钮，禁用按钮
					var sendBtn = $(event.target);
					sendBtn.attr("disabled",true);

					var param = {
						email: this.emailUserForm.email,
						imageEmailCode:this.emailUserForm.imageEmailCode,
						imageEmailCodeKey:sessionStorage.getItem("myEmailEmageCodeKey")  //"reg_xxxx"
					};


					//4.发送ajax请求
					this.$http.post("/vcode/sendEmailSmsCode",param).then(res=>{
						var ajaxResult = res.data;
						if(ajaxResult.success){
							alert(ajaxResult.message);
							//4.1.发送成：倒计时
							var time = 60;

							var interval = window.setInterval( function () {
								//每一条倒计时减一
								time = time - 1 ;

								//把倒计时时间搞到按钮上
								sendBtn.html(time);

								//4.2.倒计时完成恢复按钮
								if(time <= 0){
									sendBtn.html("获取");
									sendBtn.attr("disabled",false);
									//清除定时器
									window.clearInterval(interval);
								}
							},1000);
						}else{
							//4.3.发送失败：提示，恢复按钮
							sendBtn.attr("disabled",false);
							alert("发送失败:"+ajaxResult.message);
						}
					})
				},
				//获取手机验证码
				sendMobileCode(event){
					//1.判断手机号是否合规
					if(this.phoneUserForm.phone){
						var phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;

						if(!phoneReg.test(this.phoneUserForm.phone)) {
							alert("手机号码格式错误!");
							return false;
						}
					}
					//1.判断手机号不为空
					if(!this.phoneUserForm.phone){
						this.$notify({
							title: '警告',
							message: '手机号不能为空',
							type: 'warning'
						});
						return;
					}
					//2.判断图片验证码不为空
					if(!this.phoneUserForm.imageCode){
						this.$notify({
							title: '警告',
							message: '图片验证码不能为空',
							type: 'warning'
						});
						return;
					}
					//3.获取按钮，禁用按钮
					var sendBtn = $(event.target);
					sendBtn.attr("disabled",true);

					var param = {
						phone: this.phoneUserForm.phone,
						imageCode:this.phoneUserForm.imageCode,
						imageCodeKey:sessionStorage.getItem("myEmageCodeKey")  //"reg_xxxx"
					};


					//4.发送ajax请求
					this.$http.post("/vcode/sendSmsCode",param).then(res=>{
						var ajaxResult = res.data;
						if(ajaxResult.success){
							alert(ajaxResult.message);
							//4.1.发送成：倒计时
							var time = 60;

							var interval = window.setInterval( function () {
								//每一条倒计时减一
								time = time - 1 ;

								//把倒计时时间搞到按钮上
								sendBtn.html(time);

								//4.2.倒计时完成恢复按钮
								if(time <= 0){
									sendBtn.html("获取");
									sendBtn.attr("disabled",false);
									//清除定时器
									window.clearInterval(interval);
								}
							},1000);
						}else{
							//4.3.发送失败：提示，恢复按钮
							sendBtn.attr("disabled",false);
							alert("发送失败:"+ajaxResult.message);
						}
					})
				},
				//手机号注册
				phoneRegister(){
					this.$http.post('/register/phone',this.phoneUserForm).then((res) => {
						var ajaxResult = res.data;
						//注册成功跳转到登录页面
						if (ajaxResult.success){
							location.href="login.html";
						}else{
							alert(ajaxResult.message)
						}
					});
				},
				//邮箱注册
				phoneRegister(){
					this.$http.post('/register/email',this.emailUserForm).then((res) => {
						var ajaxResult = res.data;
						//注册成功跳转到登录页面
						if (ajaxResult.success){
							location.href="login.html";
						}else{
							alert(ajaxResult.message)
						}
					});
				},

			},
			mounted(){
				this.getImageCode()
				this.getImageEmailCode()
			}
		})
	</script>
</html>